---
type: tutorial
title: Комбинируйте макеты, чтобы получить лучшее из двух миров
description: |-
  Учебное пособие: Создайте свой первый блог на Astro —
  Добавьте свой основной макет страницы к макету, который форматирует ваши блог-посты
i18nReady: true
---
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


Теперь, когда вы добавили макет к каждому блог-посту, пришло время сделать ваши посты похожими на остальные страницы на вашем веб-сайте!


<PreCheck>
  - Вложить макет вашего блог-поста в основной макет страницы
</PreCheck>

## Вложите два макета

У вас уже есть `BaseLayout.astro` для определения общего макета ваших страниц. 

`MarkdownPostLayout.astro` дает вам некоторые дополнительные шаблоны для общих свойств блог-постов, таких как `title` и `date`, но ваши записи блога не похожи на другие страницы на вашем сайте. Вы можете привести внешний вид блог-постов в соответствие с остальными страницами вашего сайта с помощью **вложенных макетов**.

<Steps>
1. В `src/layouts/MarkdownPostLayout.astro импортируйте `BaseLayout.astro` и используйте его для обертывания всего содержимого шаблона. Не забудьте передать параметр `pageTitle`:

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```

2. Проверьте предварительный просмотр браузера по адресу `http://localhost:4321/posts/post-1`. Теперь вы должны увидеть контент, отображаемый:

    - Вашим  **основным макетом страницы**, включая стили, навигационные ссылки и социальные подвалы.
    - Вашим  **макетом блога**, включая свойства frontmatter, такие как описание, дата, заголовок и изображение.
    - Вашим  **индивидуальным содержимым блог-поста в формате Markdown**, включая только текст, написанный в этом посте.

3. Обратите внимание, что заголовок вашей страницы теперь отображается дважды, по одному разу в каждом макете.

    Удалите из `MarkdownPostLayout.astro` строку, которая отображает заголовок страницы:


    ```astro title="src/layouts/MarkdownPostLayout.astro" del={2}
    <BaseLayout pageTitle={frontmatter.title}>
      <h1>{frontmatter.title}</h1>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
      <p><em>{frontmatter.description}</em></p>
      <p>Written by: {frontmatter.author}</p>
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
      <slot />
    </BaseLayout>
    ```
</Steps>

4. Проверьте предварительный просмотр в браузере по адресу `http://localhost:4321/posts/post-1` и убедитесь, что эта строка больше не отображается и что заголовок отображается только один раз. Внесите любые другие необходимые изменения, чтобы исключить дублирование контента.


  Убедитесь, что:

    - В каждом посте блога отображается один и тот же шаблон страницы, а контент не пропадает. (Если в одном из постов блога не хватает содержимого, проверьте его свойства frontmatter).

    - На странице не дублируется контент. (Если что-то отображается дважды, то обязательно удалите это из `MarkdownPostLayout.astro`).

    Если вы хотите настроить шаблон страницы, вы можете это сделать.



<Box icon="question-mark">

### Проверьте свои знания

1. Это позволяет вам вкладывать один макет в другой и использовать модульные элементы.

    <MultipleChoice>
      <Option>
        непрерывное развертывание
      </Option>
      <Option>
        адаптивный дизайн
      </Option>
      <Option isCorrect>
        компонентный дизайн
      </Option>
    </MultipleChoice>

2. Несколько макетов особенно полезны для проектов, содержащих страницы в формате Markdown, таких как...

    <MultipleChoice>
      <Option isCorrect>
        блог
      </Option>
      <Option>
        панель управления
      </Option>
      <Option>
        приложение для чата
      </Option>
    </MultipleChoice>

3. Что из перечисленного обеспечивает шаблонизацию всех ваших страниц?

    <MultipleChoice>
      <Option>
        `index.astro`
      </Option>
      <Option isCorrect>
        `BaseLayout.astro`
      </Option>
      <Option>
        `post-1.md`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Чек-лист

<Checklist>
- [ ] Я могу вкладывать макеты, проверяя наличие дублированных элементов.
</Checklist>
</Box>

### Ресурсы

- [Вложение макетов в Astro](/ru/basics/layouts/#вложенные-макеты)